import { StyleSheet, Text, View, Dimensions } from 'react-native'
import React from 'react'
const { width, height } = Dimensions.get('window')
const DataBox = (props) => {
    // 使用三元运算符，根据rate的值，决定文字颜色
    let color = props.rate < 0 ? '#16c60c' : (props.rate > 0 ? 'red' : '#16c60c');
    return (
        <View
            style={
                {
                    minWidth: (width - 28) / 3,
                    maxWidth: (width - 28) / 1,
                    marginBottom: 24
                }
            }
        >
            <Text style={styles.title}>{props.title}</Text>
            <View style={styles.databox}>
                <Text style={styles.data}>{props.data}</Text>
                <Text style={styles.unit}>{props.unit}</Text>
            </View>
            <Text style={[{ color: color, fontSize: 12, lineHeight: 24 }]}>{props.rate}%</Text>
        </View >
    )
}

export default DataBox

const styles = StyleSheet.create({
    title: {
        fontSize: 12,
        lineHeight: 24
    },
    databox: {
        display: 'flex',
        flexDirection: 'row'
    },
    data: {
        fontSize: 20,
        textAlignVertical: 'bottom'
    },
    unit: {
        fontSize: 10,
        textAlignVertical: 'bottom'
    },

})